<template>
    <div>
        <div class="list-title" style="page-break-after: always">
            <span class="list-title-title">第二部分：下单统计</span>
            <!--<span class="list-title-des">（ 说明：北京，深圳3.0统计；上海2.0统计 ）</span>-->
        </div>
        <chart-transverse-pie :orderData="orderData"></chart-transverse-pie>
        <el-row class="table-data">
            <el-col :span="24" class="table-list">
                <el-col :span="6" class="table-list-lie"><span>当日下单数</span></el-col>
                <el-col :span="6" class="table-list-lie"><span>当日下单期望当日配送数</span></el-col>
                <el-col :span="6" class="table-list-lie"><span>当日下单期望次日配送数</span></el-col>
                <el-col :span="6" class="table-list-lie"><span>当日下单期望其他时间配送数</span></el-col>
            </el-col>
            <el-col :span="24" class="table-list">
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{orderData.order}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{orderData.today_send}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{orderData.tomorrow_send}}</span></el-col>
                <el-col :span="6" class="table-list-lie"><span class="fontsize16">{{orderData.other_send}}</span></el-col>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import chartTransversePie from '../../../../components/chart/Pie';

    export default {
        name: "orderStatistics",
        props: {
            orderData:{
                type: Object,
                default: ()=>{
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        mounted() {
        },
        methods: {},
        components: {
            chartTransversePie
        }
    }
</script>

<style scoped lang="less">
    .list-title {
        margin: 41px 0 33px 0;
        .list-title-title {
            margin-left: 173px;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.87);
        }
        .list-title-des {
            margin-left: 49px;
            font-size: 14px;
            color: rgba(255, 0, 0, 0.87);
        }
    }
    .table-data{
        text-align: center;
        border:1px solid rgba(0,0,0,0.12);
        border-right:none;
        .fontsize16{
            font-size: 16px;
        }
        .table-list{
            .table-list-lie{
                height: 52px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 7px 30px;
                border-right:1px solid rgba(0,0,0,0.12);
            }
        }
        .table-list:nth-of-type(1){
            display: flex;
            color:rgba(0,0,0,0.54);
            font-size:18px;
        }
        .table-list:nth-of-type(2n-1){
            background-color: rgba(0,0,0,0.12);
        }
    }
</style>
